<template>
  <view class="details-container" v-if="bookDetail + ''">
    <!-- 标题 -->
    <view class="title">《 {{ bookDetail.name }} 》</view>
    <view class="bookInfo">
      <!-- 图书图片 -->
      <view class="bookPic">
        <image :src="bookDetail.img" mode=""></image>
      </view>
      <!-- 内容信息 -->
      <view class="bookText">
        <view class="publishYear">
          出版时间
          <span>{{ bookDetail.year }}年</span>
        </view>
        <view class="publisher">
          出版社
          <span>{{ bookDetail.publish }}</span>
        </view>
        <view class="author">
          作者
          <span>{{ bookDetail.author }}</span>
        </view>
        <view class="isbn">
          ISBN
          <span>{{ bookDetail.isbn }}</span>
        </view>
      </view>
    </view>

    <!-- 展示书所在的地方 -->
    <view class="bookTable">
      <uni-table border stripe emptyText="暂无更多数据">
        <!-- 表格数据行 -->
        <uni-tr>
          <uni-th width="200rpx" align="right">条码号</uni-th>
          <uni-td>{{ bookDetail.tiaoma }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="right">状态</uni-th>
          <uni-td>在馆</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="right">所属馆藏地</uni-th>
          <uni-td>{{ bookDetail.address }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="right">索书号</uni-th>
          <uni-td>{{ bookDetail.num }}</uni-td>
        </uni-tr>
        <uni-tr>
          <uni-th align="right">借阅状态</uni-th>
          <uni-td v-if='bookDetail.status + "" === "0"'>可借</uni-td>
          <uni-td v-if='bookDetail.status + "" === "1"'>已借出</uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>
</template>

<script>
import { getBookDetailsAsync } from '@/api/book.js'
export default {
  data () {
    return {
      bookDetail: {},
      bookid: null,
    };
  },
  onLoad (option) {
    console.log(option);
    this.bookid = option.id;

    this.getBookDetail()

  },
  methods: {
    // 获取书本详情
    async getBookDetail () {
      try {
        const params = {
          id: this.bookid
        }
        const res = await getBookDetailsAsync(params)
        this.bookDetail = res.data.data
      } catch (error) {

        console.log('%c [  ]-109', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    }
  }


};
</script>

<style lang="scss">
.details-container {
  background-color: #fff;
  padding: 0 10rpx;
  height: 100vh;

  .title {
    font-size: 40rpx;
    font-weight: 700;
    line-height: 80rpx;
    padding: 10rpx 0;
    border-bottom: 1rpx solid darkgray;
    text-align: center;
  }

  .bookInfo {
    margin: 0 auto;
    margin-top: 20rpx;
    display: flex;
    gap: 40rpx;
    width: 90%;
    align-items: center;

    .bookPic {
      $size: 250rpx;
      width: $size * 0.8;
      height: $size;

      image {
        background-color: skyblue;
        width: 100%;
        height: 100%;
      }
    }

    .bookText {
      flex: 1;
      font-size: 26rpx;
      align-self: flex-start;

      view {
        line-height: 50rpx;

        span {
          margin-left: 20rpx;
          color: #8a8a8a;
        }
      }
    }
  }

  .bookTable {
    width: 90%;
    margin: 0 auto;
    margin-top: 40rpx;
  }
}
</style>
